/*----------  layout 首页  ----------*/

.layout-page {
  position: relative;
  min-height: 100vh;
}

.layout-sider {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 69;
  overflow: auto;
  height: 100vh;
}

.layout-right {
  position: relative;
  z-index: 49;
  transition: all 0.2s;
}

.layout-header {
  display: flex;
  z-index: 9;
  background-color: @white;
  padding: 0 10px;

  &--left {
    flex: 1;
  }

  &--switch {
    display: inline-block;
    font-size: 18px;
    opacity: 0.8;
    padding: 0 10px;
    cursor: pointer;
    margin-right: @gap;

    &__collapsed {
      transform: rotateY(180deg);
    }
  }
}

.layout-page--boxshadow {
  .layout-header {
    box-shadow: 0 4px 4px rgba(52, 71, 106, 0.03);
  }

  .layout-content {
    padding-top: @gap;
  }
}

/*----------  tabView 首页  ----------*/
@tabItemHeight: 32px;

.layout-tabview {
  padding: 12px @gap;
  background-color: @colorBg;

  .arco-tabs {
    line-height: 1;

    &-nav {
      margin-bottom: 0;

      &-operations {
        display: none;
      }

      &::before {
        border: none;
      }

      .arco-tabs-extra-content {
        margin-left: 0;
      }

      .arco-tabs-tab {
        height: @tabItemHeight;
        line-height: @tabItemHeight;
        background-color: @white;
        border: none;
        opacity: 0.7;
        margin-left: 0;
        border-radius: 2px;

        &:hover {
          opacity: 1;
        }

        &-remove {
          font-size: 10px;
          padding-left: 4px;
          padding-right: 2px;
        }

        &-active {
          opacity: 1;
        }

        & + .ant-tabs-tab {
          margin-left: 6px;
        }
      }
    }
  }

  &--drop {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: @tabItemHeight;
    line-height: @tabItemHeight;
    width: @tabItemHeight;
    text-align: center;
    background-color: @white;

    svg {
      opacity: 0.5;
    }
  }

  &-btn {
    width: @tabItemHeight;
    text-align: center;
    display: inline-block;
    font-size: 11px;
    opacity: 0.9;
    cursor: pointer;
  }
}

/*----------  右侧 - 主体切换  ----------*/
.user-theme {
  display: inline-block;
  vertical-align: middle;
  color: @black;
  opacity: 0.8;
  cursor: pointer;
  margin-left: 12px;
  margin-right: 12px;
}

/*----------  右侧 - 用户下拉  ----------*/
.user-dropdown {
  display: inline-block;

  & > span {
    display: inline-block;
    vertical-align: top;
    height: 100%;
  }

  &-menu {
    cursor: pointer;

    &__name {
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      max-width: 130px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &__avatar {
      margin-top: -4px;
      margin-right: 6px;
      cursor: pointer;

      img {
        display: block;
      }
    }

    &__down {
      color: @colorC;
    }
  }
}

/*----------  logo  ----------*/
@logoHeight: 32px;
.layout-logo {
  color: @white;
  line-height: @logoHeight;
  text-align: center;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  &--img {
    height: 24px;
    margin: 0 4px;
  }

  &--title {
    display: inline-block;
    font-size: 18px;
    opacity: 1;
    transition: all 0.4s;

    span {
      display: block;
    }
  }
}

.layout-logo__collapsed {
  .layout-logo--title {
    opacity: 0;
    transition: all 0.4s;

    span {
      display: none;
    }
  }
}
